﻿<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>小米</title>
<style type="text/css">
/* css reset */
html, body { height: 100%; }
body, ul, li, p { margin: 0; padding: 0; }
a { text-decoration: none; display: inline-block; }
/* define bootstrap 5 columns */
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    width: 20%;
    float: left;
}
img { width: 100%; }
</style>
<link href="css2/bootstrap.min.css" rel="stylesheet">
<link href="css2/mycss.css" rel="stylesheet">
<link href="css2/767.css" rel="stylesheet">
</head>
<body>
<div class="box">

<!-- 顶部导航菜单 -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <!-- 手机版菜单按钮 -->
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse"
                            data-target=".navbar-responsive-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- 两个菜单内容 -->
                <div class="collapse navbar-collapse navbar-responsive-collapse mytopnav">
                    <!-- 右边菜单内容 -->
                    <ul class="nav navbar-nav">
                        <li><a href="javascript:;">小米网</a><span></span></li>
                        <li><a href="javascript:;">MIUI</a><span></span></li>
                        <li><a href="javascript:;">米聊</a><span></span></li>
                        <li><a href="javascript:;">游戏</a><span></span></li>
                        <li><a href="javascript:;">多看阅读</a><span></span></li>
                        <li><a href="javascript:;">云服务</a><span></span></li>
                        <li><a href="javascript:;">小米网移动版</a><span></span></li>
                        <li><a href="javascript:;">问题反馈</a><span></span></li>
                        <li><a href="javascript:;">Select Region</a><span></span></li>
                    </ul>
                    <div class="secondul">
                        <div class="btn-group btn-group-justified" role="group">
                            <a href="javascript:;" type="button" class="btn btn-default">登陆</a>
                            <a href="javascript:;" type="button" class="btn btn-default">注册</a>
                            <a href="javascript:;" type="button" class="btn btn-default">查看购物车</a>
                        </div>
                    </div>
                    <!-- 左边菜单内容 -->
                    <a class="mybtn-shopcar pull-right" href="javascript:;">
                        <span class="glyphicon glyphicon-shopping-cart" style="padding: 0; border: none;">&nbsp;购物车(0)</span>
                        <div class="panel panel-default myshopcar-panel">
                            <div class="panel-body">
                                未添加任何商品
                            </div>
                        </div>
                    </a>
                    <ul id="firstul" class="nav navbar-nav pull-right">
                        <li><a href="javascript:;">登陆</a></li>
                        <li><span></span></li>
                        <li><a href="javascript:;">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 主体内容 -->
<article class="container-fluid">
    <!-- 第一行菜单、搜索栏 -->
    <div class="row">
        <!-- mi、gif图片 -->
        <div class="col-xs-4 col-sm-3">
            <a class="mymilogo pull-left" href="javascript:;">
                <img src="img/mi-logo.png"/>
            </a>
            <a class="mygiflogo pull-left" href="javascript:;">
                <img src="img/gifgif.gif"/>
            </a>
        </div>

        <!-- 菜单内容 -->
        <div class="col-xs-4 col-sm-6">
            <nav class="mynav2 text-center">
                <ul class="list-inline">
                    <li><a href="javascript:;">小米手机</a></li>
                    <li><a href="javascript:;">红米</a></li>
                    <li><a href="javascript:;">平板</a></li>
                    <li id="tto">
                        <div class="dropdown">
                          <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                            <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="dLabel">
                            <li><a href="javascript:;">电视</a></li>
                            <li><a href="javascript:;">盒子·影音</a></li>
                            <li><a href="javascript:;">路由器</a></li>
                            <li><a href="javascript:;">智能硬件</a></li>
                            <li><a href="javascript:;">服务</a></li>
                            <li><a href="javascript:;">社区</a></li>
                          </ul>
                        </div>
                    </li>
                    <li><a href="javascript:;">电视</a></li>
                    <li><a href="javascript:;">盒子·影音</a></li>
                    <li><a href="javascript:;">智能硬件</a></li>
                    <li><a href="javascript:;">服务</a></li>
                    <li><a href="javascript:;">社区</a></li>
                </ul>
            </nav>
            <div class="dropdown nav-sm text-center">
                <a id="dLabel" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
                <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" aria-labelledby="dLabel">
                    <li><a href="javascript:;">小米手机</a></li>
                    <li><a href="javascript:;">红米</a></li>
                    <li><a href="javascript:;">平板</a></li>
                    <li><a href="javascript:;">电视</a></li>
                    <li><a href="javascript:;">盒子·影音</a></li>
                    <li><a href="javascript:;">路由器</a></li>
                    <li><a href="javascript:;">智能硬件</a></li>
                    <li><a href="javascript:;">服务</a></li>
                    <li><a href="javascript:;">社区</a></li>
                </ul>
            </div>
        </div>

        <!-- 搜索栏 -->
        <div class="col-xs-4 col-sm-3">
            <form class="form-inline pull-right mynav2search" role="search">
                <div class="form-group">
                    <input type="search" class="form-control input-sm" placeholder="xxxxxx">
                </div>
                <button type="submit" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-search" style="font-size: 13px;"></span>
                </button>
            </form>
        </div>
    </div>
    <!-- 第二行轮播 -->
    <div class="row" style="margin-top: 5px">
        <!-- 轮播上的竖菜单 -->
        <div class="col-xs-12 col-sm-2">
            <div class="mymenu">
                <ul class="list-unstyled">
                    <li data-id="a">
                        <a href="javascript:;">手机 平板 电话卡</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="b">
                        <a href="javascript:;">电视 盒子</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="c">
                        <a href="javascript:;">路由器 智能硬件</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="d">
                        <a href="javascript:;">移动电源 插线板</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="e">
                        <a href="javascript:;">耳机 音箱</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="f">
                        <a href="javascript:;">电池 存储卡</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="g">
                        <a href="javascript:;">保护套 后盖</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="h">
                        <a href="javascript:;">贴膜 其他配件</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="i">
                        <a href="javascript:;">米兔 服装</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>

                    <li data-id="j">
                        <a href="javascript:;">箱包 其他周边</a>
                        <span class="glyphicon glyphicon-chevron-right">1</span>
                    </li>
                </ul>
                <!-- 二级菜单 -->
                <div class="lisay">
                    <div id="b">2</div>
                    <div id="a">1</div>
                    <div id="c">3</div>
                    <div id="d">4</div>
                    <div id="e">5</div>
                    <div id="f">6</div>
                    <div id="g">7</div>
                    <div id="h">8</div>
                    <div id="i">9</div>
                    <div id="j">101</div>
                </div>
            </div>
        </div>
        <!-- 轮播 -->
        <div class="col-xs-12 col-sm-10">
            <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                </ol>

                <!-- Wrapper for slides --> 
                <div id="carheight" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <a href="javascript:;"><img src="img/轮播1.jpg" alt="0"/></a>
                        <div class="carousel-caption">
                            赶紧购买
                        </div>
                    </div>
                    <div class="item">
                        <a href="javascript:;"><img src="img/轮播2.jpg" alt="1"/></a>
                        <div class="carousel-caption">
                            赶紧购买
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a id="cleft" class="carousel-control left" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a id="cright" class="carousel-control right" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 第三行1+3方块 -->
    <div class="row" style="margin-top: 10px;">
        <div class="col-xs-12 col-sm-3">
            <div class="mybox">
                <ul class="list-inline text-center">
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-earphone"></span><br>电信专场
                    </a></li>
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-gift"></span><br>企业团购
                    </a></li>
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-refresh"></span><br>官翻产品
                    </a></li>
                </ul>
                <ul class="list-inline text-center">
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-phone"></span><br>小米移动
                    </a></li>
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-refresh"></span><br>以旧换新
                    </a></li>
                    <li><a href="javascript:;">
                        <span class="glyphicon glyphicon-credit-card"></span><br>话费充值
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="col-xs-12 col-sm-3">
            <a class="oathree" href="javascript:;">
                <img class="img-responsive" src="img/栅格pic1.jpg">
            </a>
        </div>

        <div class="col-xs-12 col-sm-3">
            <a class="oathree" href="javascript:;">
                <img class="img-responsive" src="img/栅格pic2.jpg">
            </a>
        </div>

        <div class="col-xs-12 col-sm-3">
            <a class="oathree" href="javascript:;">
                <img class="img-responsive" src="img/栅格pic3.jpg">
            </a>
        </div>
    </div>

    <!-- 第四行多张轮播 -->
    <div class="row" style="margin-top: 10px;">
        <!-- 标题 -->
        <div class="col-xs-12">
            <h3>小米最新单品
                <!-- 左右按钮组 -->
                <div class="pull-right">
                    <div class="btn-group btn-group-xs" role="group">
                        <a type="button" class="btn btn-default left" href="#carousel-example-generic2"
                           data-slide="prev">&nbsp;&nbsp;《&nbsp;&nbsp;</a>
                        <a type="button" class="btn btn-default right" href="#carousel-example-generic2"
                           data-slide="next">&nbsp;&nbsp;》&nbsp;&nbsp;</a>
                    </div>
                </div>
            </h3>
        </div>
        <!-- 轮播图片 -->
        <div class="col-xs-12">
            <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner text-center" role="listbox">
                    <div class="item active">
                        <div class="row">
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #ffac13; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/6.jpg">
                                        <p style="color: #000000">小米手机1</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #83c44e; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/1.png">
                                        <p style="color: #000000">小米手机2</p>
                                    </a>
                                    <p>高端 4K 网络机顶盒 限时特价 抢购</p>
                                    <p style="color: #ff6709">$1555</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #2196f3; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/2.png">
                                        <p style="color: #000000">小米手机3</p>
                                    </a>
                                    <p>原装液晶屏，金属机身，足量现货</p>
                                    <p style="color: #ff6709">$577</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #e53935; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/3.png">
                                        <p style="color: #000000">小米手机4</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$999</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #00c0a5; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/4.png">
                                        <p style="color: #000000">小米手机5</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #00c0a5; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/4.png">
                                        <p style="color: #000000">小米手机55</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #ffac13; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/6.jpg">
                                        <p style="color: #000000">小米手机1</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #83c44e; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/1.png">
                                        <p style="color: #000000">小米手机2</p>
                                    </a>
                                    <p>高端 4K 网络机顶盒 小米手机2 小米手机2</p>
                                    <p style="color: #ff6709">$1555</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #2196f3; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/2.png">
                                        <p style="color: #000000">小米手机3</p>
                                    </a>
                                    <p>原装液晶屏，金属机身，足量现货</p>
                                    <p style="color: #ff6709">$577</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #e53935; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/3.png">
                                        <p style="color: #000000">小米手机4</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$999</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #00c0a5; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/4.png">
                                        <p style="color: #000000">小米手机5</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-2">
                                <div style="border-top:1px solid #00c0a5; background-color: #fafafa;">
                                    <a href="javascript:;">
                                        <img src="img/4.png">
                                        <p style="color: #000000">小米手机5</p>
                                    </a>
                                    <p>4GB+128GB陶瓷版，7月26日开售</p>
                                    <p style="color: #ff6709">$1666</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 第五行商品区1 -->
    <div class="row" style="margin-top: 10px; padding-bottom: 10px;">
        <div class="col-xs-12">
            <h3>智能硬件
                <a class="pull-right mylook" href="javascript:;">查看全部&nbsp;<span
                        class="glyphicon glyphicon-circle-arrow-right"></span></a>
            </h3>
        </div>

        <!-- 长图片 -->
        <div class="col-xs-12 col-sm-3">
            <a href="javascript:;">
                <img id="picleft" src="img/row11.jpg" onmouseenter="picup(this)"
                     onmouseleave="picdown(this)">
            </a>
        </div>

        <!-- 短图片 -->
        <div class="col-xs-12 col-sm-9">
            <!-- 第1行 -->
            <div class="row">
                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row12.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <div class="mydiscount" style="background-color: #ffac13;">包邮费</div>
                        <a class="text-center" href="javascript:;">
                            <img src="img/row14.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row13.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row15.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第2行 -->
            <div class="row" id="second"> 
                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row12.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <div class="mydiscount" style="background-color: #ffac13;">包邮费</div>
                        <a class="text-center" href="javascript:;">
                            <img src="img/row14.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row13.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-3">
                    <div class="mypic-sm text-center" onmouseenter="picup(this)"
                         onmouseleave="picdown(this)">
                        <a class="text-center" href="javascript:;">
                            <img src="img/row15.jpg">
                        </a>
                        <p>4GB+128GB陶瓷版，7月26日开售</p>
                        <p style="color: #ff6709;">$1666</p>
                        <div class="mypic-sm-panel">
                            123
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<!-- 底部 -->
<footer>
    <div class="container-fluid">
        <!-- 第一行服务种类 -->
        <div class="row" style="margin-top: 0;">
            <div class="myservices text-center">
                <div class="col-sm-1-5">
                    <span class="glyphicon glyphicon-wrench">预约维修服务</span>
                    <span></span>
                </div>
                <div class="col-sm-1-5">
                    <span class="glyphicon glyphicon-ok-circle">7天无理由退货</span>
                    <span></span>
                </div>
                <div class="col-sm-1-5">
                    <span class="glyphicon glyphicon-ok">15天免费换货</span>
                    <span></span>
                </div>
                <div class="col-sm-1-5">
                    <span class="glyphicon glyphicon-gift">满150包邮</span>
                    <span></span>
                </div>
                <div class="col-sm-1-5">
                    <span class="glyphicon glyphicon-map-marker">500家售后网点</span>
                    <span></span>
                </div>
            </div>
        </div>
        <!-- 第二行服务链接 -->
        <div class="row" style="margin-top: 10px;">
            <div class=" col-xs-12 col-sm-10">
                <div class="mylink">
                    <div class="col-xs-6 col-sm-2">
                        <h5>帮助中心</h5>
                        <ul class="list-unstyled">
                            <li>账户管理</li>
                            <li>购物指南</li>
                            <li>订单操作</li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <h5>服务支持</h5>
                        <ul class="list-unstyled">
                            <li>售后政策</li>
                            <li>自助服务</li>
                            <li>相关下载</li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <h5>线下门店</h5>
                        <ul class="list-unstyled">
                            <li>小米之家</li>
                            <li>服务网点</li>
                            <li>零售网点</li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <h5>关于小米</h5>
                        <ul class="list-unstyled">
                            <li>了解小米</li>
                            <li>加入小米</li>
                            <li>联系我们</li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <h5>关注我们</h5>
                        <ul class="list-unstyled">
                            <li>新浪微博</li>
                            <li>小米部落</li>
                            <li>官方微信</li>
                        </ul>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <h5>特色服务</h5>
                        <ul class="list-unstyled">
                            <li>F码通道</li>
                            <li>小米移动</li>
                            <li>防伪查询</li>
                        </ul>
                        <span></span>
                    </div>
                </div>
            </div>
            <!-- 客服联系 -->
            <div class="col-xs-12 col-sm-2">
                <div class="mysersta">
                    <h4>400-100-5678</h4>
                    <p>周一至周日 8:00-18:00  （仅收市话费）</p>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-comment"></span>
                        <span>在线客服</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- 第三行 -->
        <div class="row" style="margin-top: 15px;">
            <div class="col-xs-8">
                <img  class="mymilogo pull-left footerlogo" src="img/mi-logo.png" />              
                <div class="myinfo">
                    <p>
                        ©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号
                        违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="myseal text-center">
                    <a href="javascript:;"><img src="img/seal.png" style="height: 28px; width: auto;"></a>
                    <a href="javascript:;"><img src="img/v-logo-1.png"></a>
                    <a href="javascript:;"><img src="img/v-logo-2.png"></a>
                    <a href="javascript:;"><img src="img/v-logo-3.png"></a>
                </div>
            </div>
            <div class="col-xs-4 col-xs-offset-4">
                <img src="img/slogan2016.png">
            </div>
        </div>
</footer>
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vectorfun.js"></script>
<script src="js/funs.js"></script>
<script src="js/myjs.js"></script>
<script src="js/myWR.js"></script>
<script>
var timerb;
var obj = $('#picleft');
picdown(obj);
function picup(x) {
    if ($(window).width() > 767 ) {
        timerb = setInterval(function(){
            $(x).animate({marginTop: '0'});
            $(x).children(".mypic-sm-panel").slideDown();
            clearInterval(timerb);
        }, 299);
    }
}

function picdown(x) {
    if ($(window).width() > 767 ) {
        $(x).animate({marginTop: '5px'});
        clearInterval(timerb);
        $(x).children(".mypic-sm-panel").slideUp();
    }
}
</script>
</body>
</html>